<#cenluan title="发起投票"  menu="vote">
    <ol class="breadcrumb">
        <li class=""><a href="/vote">投票</a></li>
        <li class="active">发起投票</li>
    </ol>
    <!--@if(!isEmpty(msg)){-->
    <div class="alert alert-danger text-center">
        <button class="close" data-dismiss="alert">X</button>
        ${msg}
    </div>
    <!--@}-->
    <form class="form-horizontal" action="/vote/save" method="post" id="voteForm">
        ${token}
        <div class="form-group">
            <label class="control-label col-md-2">类型</label>

            <div class="col-md-8">
                <label class="radio-inline">
                    <input type="radio" checked="checked" name="vote.type" value="SINGLE">单选
                </label>
                <label class="radio-inline">
                    <input type="radio" name="vote.type" value="MULTIPLE">多选
                </label>
            </div>
        </div>
        <div class="form-group">
            <label class="control-label col-md-2">标题</label>

            <div class="col-md-5">
				<textarea class="form-control" placeholder="100字以内" style="resize:vertical;" name="vote.title"
                          maxlength="100"></textarea>
            </div>
        </div>
        <!-- 选项 -->
        <div class="form-group">
            <label class="control-label col-md-2">选项</label>

            <div class="col-md-5">
                <input class="form-control" placeholder="20字以内" name="option" maxlength='20'>
            </div>
        </div>
        <div class="form-group">
            <div class="col-md-5 col-md-offset-2">
                <input class="form-control" placeholder="20字以内" name="option" maxlength='20'>
            </div>
        </div>
        <div class="form-group" id="form-group-action">
            <div class="col-md-2 col-md-offset-2 mb20">
                <button class="btn btn-default btn-block" type="button" id="btn-add-option">
                    <span class="glyphicon glyphicon-plus"></span>&nbsp;添加选项
                </button>
            </div>
            <div class="col-md-3">
                <button class="btn btn-primary btn-block" type="submit">保存</button>
            </div>
        </div>

    </form>
    <script>
        $(function () {
            var optionTemplate = "<div class='form-group'>" + "<div class='col-md-5 col-md-offset-2'>" + "<div class='input-group'>"
                    + "<input class='form-control' placeholder='20字以内' name='option' maxlength='20'>" + "<span class='input-group-btn'>"
                    + "<button class='btn btn-default btn-del'>" + "<span class='glyphicon glyphicon-remove-circle'></span></button>" + "</span>"
                    + "</div></div></div>";
            $("#voteForm").submit(function () {
                var title = $("[name='vote.title']");
                if (!$.trim(title.val())) {
                    title.parent().addClass("has-error").removeClass("has-success");
                    title.focus();
                    return false;
                } else {
                    title.parent().removeClass("has-error").addClass("has-success");
                }
                var optionCheck = true;
                $.each($("[name='option']"), function () {
                    if (!$.trim($(this).val())) {
                        $(this).parent().addClass("has-error").removeClass("has-success");
                        optionCheck = false;
                        $(this).focus();
                        return;
                    } else {
                        $(this).parent().removeClass("has-error").addClass("has-success");
                    }
                });
                if (!optionCheck) {
                    return false;
                }
                $("#form-group-action button").button("loading");
                return true;
            });
            $("#btn-add-option").click(function () {
                if ($("[name='option']").length >= 10) {
                    $(this).addClass("disabled");
                    return;
                }
                var template = $(optionTemplate);
                template.find(".btn-del").click(function () {
                    template.remove();
                    if ($("[name='option']").length < 10) {
                        $("#btn-add-option").removeClass("disabled");
                    }
                });
                $("#form-group-action").before(template);
            });
        });
    </script>
</#cenluan>